// 交际用语
<template>
  <div class="wrapper">
    <div class="exam_container">
      <div class="title">{{quindex+1}}. {{ topicData.title }}</div>
      <div>
        <el-radio-group v-model="radio" @change="check">
          <el-radio
            :label="item.value"
            v-for="(item, index) in topicData.option"
            :key="index"
            >{{item.value}}. {{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div>
      <el-button type="success" @click="answer_show = true">查看答案</el-button>
      <el-button type="primary" @click="nextClick">下一题</el-button>
    </div>
    <!-- 正确答案 -->
    <div class="answer_container" v-show="answer_show" :class="topicData.answer === radio?'success':'error'">
      正确答案: {{ topicData.answer }}
    </div>
    <!-- 题号 -->
    <div class="code_list">
      <div
        class="code_item"
        v-for="(item, index) in topicData_all"
        :key="index"
        @click="skip(item,index)"
        :class="index === quindex ? 'active' : ''"
      >
        {{ index+1 }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      radio: "",
      topicData_all: [],
      topicData: {},
      index: 0,
      answer_show: false,
      quindex:0
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.url = sessionStorage.getItem("url");
    this.get_dataFun();
  },
  methods: {
    get_dataFun() {
      this.$axios({
        methods: "get",
        url: `../../static/data/cihuei.json`,
      }).then((response) => {
        console.log(response);
        this.topicData_all = response.data.data;
        this.topicData = response.data.data[0];
      });
    },
    // 下一题
    nextClick() {
      this.answer_show = false;
      if (this.index < this.topicData_all.length - 1) {
        this.radio = ""
        this.index++;
        this.quindex++
        this.topicData = this.topicData_all[this.index];
      } else {
        this.$message({
          message: "已经是最后一题",
          type: "error",
        });
      }
    },
    // 跳转
    skip(row,index) {
      this.answer_show = false;
      this.index = index;
      this.quindex = index
      this.topicData = row;
      this.radio = ""
    },
    // 验证
    check(){
      this.answer_show = true
    }
  },
};
</script>
<style scoped>
.exam_container {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
}
.el-radio {
  margin-top: 20px;
  display: block;
  text-align: left;
}
.answer_container{
  padding: 10px;
  color:#fff;
  margin-top: 10px;
}
.success{
  background: #409EFF;
}
.error{
  background: #F56C6C;
}
.info{
  background: #909399;
}
.code_list {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.code_item {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  margin-top: 10px;
}
.active {
  background: #409eff;
  color: #fff;
}
.title{
  width: 100%;
}
</style>